import * as React from 'react';
import {FlatList, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen({navigation}) {
  return (
    <View style={styles.container}>
      <FlatList
        // eslint-disable-next-line no-sparse-arrays
        data={[
          {key: '刘德华'},
          {key: '周星驰'},
          {key: '梁朝伟'},
          {key: '无间道1'},
          {key: '无间道2'},
          {key: '喜剧之王'},
        ]}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => navigation.navigate('Details')}>
            <Text style={styles.item}>{item.key}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

function DetailScreen() {
  return <Text>Detail Screen</Text>;
}
const Stack = createStackNavigator();

function TestTEst() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default TestTEst;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  item: {
    padding: 10,
    fontSize: 18,
    // height: 44,
    color: 'red',
  },
});
